<template>
  <div id="app">
    <div class="container">
      <div class="head" v-if="!this.isShowBar">
        <van-nav-bar
          :title="title"
          left-text="返回"
          left-arrow
          @click-left="$router.go(-1)"
        ></van-nav-bar>
      </div>
      <keep-alive include="category">
        <router-view :key="$route.query.id" class="router-view" />
      </keep-alive>
    </div>
    <van-tabbar route v-if="isShowBar" active-color="#c35559">
      <van-tabbar-item icon="wap-home-o" replace to="/home"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="description" replace to="/topic"
        >专题</van-tabbar-item
      >
      <van-tabbar-item icon="apps-o" replace to="/category"
        >分类</van-tabbar-item
      >
      <van-tabbar-item icon="cart-o" replace to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="friends-o" replace to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowBar: true,
      title: "",
    };
  },
  created() {
    var userInfo = {
      openId: "66",

      nickName: "赵六",

      avatarUrl:
        "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132",
    };

    var openId = userInfo.openId;

    localStorage.setItem("userInfo", JSON.stringify(userInfo));

    localStorage.setItem("openId", openId);
  },
  watch: {
    $route(to, from) {
      console.log("路由更改:", to);
      const paths = ["/home", "/topic", "/category", "/cart", "/my"];
      let path = paths.find((item) => item == to.path);
      if (path) {
        this.isShowBar = true;
      } else {
        this.isShowBar = false;
        this.title = to.meta?.title;
      }
    },
  },
};
</script>

<style lang="scss">
// 引入全局样式
@import "./assets/css/global.scss";

#app {
  height: 100%;
  .container {
    height: 100%;
    .router-view {
      height: calc(100% - 46px);
      overflow: scroll;
    }
  }
}
</style>
